<template>
  <div class="ansible-audit-container">
    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-hdd"></i>
              Docker数据卷管理
            </h1>
            <p class="page-subtitle">管理Docker数据卷和存储</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_volumes || 0 }}</div>
              <div class="stat-label">数据卷总数</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.used_volumes || 0 }}</div>
              <div class="stat-label">使用中</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_size || '0 MB' }}</div>
              <div class="stat-label">总大小</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="search-filters glass-effect">
        <el-form inline class="search-form">
          <el-form-item>
            <el-select v-model="selectedServer" placeholder="选择Docker服务器" class="server-select">
              <el-option
                v-for="server in dockerServers"
                :key="server.id"
                :label="server.name"
                :value="server.id"
              />
            </el-select>
            <el-button type="primary" @click="loadVolumes" class="glass-button refresh-button" :loading="loading">
              <i class="fa fa-refresh"></i>
              刷新数据卷
            </el-button>
            <el-button @click="createDialogVisible = true" class="glass-button add-button">
              <i class="fa fa-plus"></i>
              创建数据卷
            </el-button>
            <el-button @click="pruneVolumes" class="glass-button delete-button">
              <i class="fa fa-trash"></i>
              清理未使用数据卷
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 数据卷列表 -->
      <div class="audit-table-section glass-effect">
        <div class="section-title">
          <i class="fa fa-hdd"></i>
          Docker数据卷列表
        </div>

        <el-table
          :data="volumes"
          style="width: 100%"
          v-loading="loading"
          row-class-name="audit-row"
          class="audit-table"
        >
          <el-table-column prop="Name" label="数据卷名称" min-width="300" show-overflow-tooltip>
            <template #default="scope">
              <div class="config-name">
                <i class="fa fa-hdd"></i>
                {{ scope.row.Name }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="Driver" label="驱动" width="100" />

          <el-table-column prop="Mountpoint" label="挂载点" min-width="250">
            <template #default="scope">
              <span class="path-text">
                {{ scope.row.Mountpoint }}
              </span>
            </template>
          </el-table-column>



          <el-table-column prop="ContainerCount" label="使用容器数" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.ContainerCount > 0 ? 'success' : 'info'" size="small">
                {{ scope.row.ContainerCount || 0 }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="CreatedAt" label="创建时间" width="180">
            <template #default="scope">
              <span class="time-text">
                {{ formatTime(scope.row.CreatedAt) }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="320" :show-overflow-tooltip="false">
            <template #default="scope">
              <div class="action-buttons">
                <el-button
                  @click="inspectVolume(scope.row)"
                  size="small"
                  class="glass-button import-button"
                >
                  <i class="fa fa-search"></i>
                  详情
                </el-button>
                <el-button
                  @click="viewConnectedContainers(scope.row)"
                  size="small"
                  class="glass-button sync-button"
                >
                  <i class="fa fa-link"></i>
                  使用容器
                </el-button>

                <el-button
                  @click="deleteVolume(scope.row)"
                  size="small"
                  class="glass-button delete-button"
                  :disabled="scope.row.ContainerCount > 0"
                >
                  <i class="fa fa-trash"></i>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <!-- 数据卷详情对话框 -->
  <el-dialog
    v-model="detailDialogVisible"
    :title="detailDialogTitle"
    width="90%"
    top="5vh"
    class="glass-dialog inspect-dialog"
    destroy-on-close
  >
    <template #header="{ titleId, titleClass }">
      <div class="inspect-header">
        <div class="inspect-title">
          <i class="fa fa-info-circle inspect-icon"></i>
          <span :id="titleId" :class="titleClass">{{ detailDialogTitle }}</span>
        </div>
        <div class="inspect-controls">
          <el-button @click="refreshVolumeDetail" size="small" class="glass-button">
            <i class="fa fa-refresh"></i>
            刷新
          </el-button>
          <el-button @click="copyVolumeDetail" class="glass-button">
            <i class="fa fa-copy"></i>
            复制
          </el-button>
          <el-button @click="scrollDetailToTop" class="glass-button">
            <i class="fa fa-arrow-up"></i>
            顶部
          </el-button>
          <el-button @click="scrollDetailToBottom" class="glass-button">
            <i class="fa fa-arrow-down"></i>
            底部
          </el-button>
          <el-button @click="closeDetailDialog" class="glass-button danger">
            <i class="fa fa-times"></i>
            关闭
          </el-button>
        </div>
      </div>
    </template>
    <div class="inspect-content" ref="detailContentRef">
      <pre class="inspect-pre">{{ volumeDetailContent }}</pre>
    </div>
  </el-dialog>

  <!-- 创建数据卷对话框 -->
  <el-dialog
    v-model="createDialogVisible"
    title="创建数据卷"
    width="600px"
    class="glass-dialog"
    :close-on-click-modal="false"
  >
    <el-form :model="createForm" label-width="100px" class="glass-form">
      <el-form-item label="数据卷名称" required>
        <el-input v-model="createForm.name" placeholder="请输入数据卷名称" class="glass-input" />
      </el-form-item>

      <el-form-item label="驱动类型">
        <el-select v-model="createForm.driver" class="glass-select" style="width: 100%">
          <el-option label="local" value="local" />
          <el-option label="nfs" value="nfs" />
          <el-option label="cifs" value="cifs" />
        </el-select>
      </el-form-item>

      <el-form-item label="标签">
        <el-input v-model="createForm.labels" placeholder="key1=value1,key2=value2" class="glass-input" />
        <div class="form-tip">多个标签用逗号分隔</div>
      </el-form-item>

      <el-form-item label="选项">
        <el-input v-model="createForm.options" placeholder="key1=value1,key2=value2" class="glass-input" />
        <div class="form-tip">驱动特定选项，多个选项用逗号分隔</div>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="createDialogVisible = false" class="glass-button">取消</el-button>
        <el-button @click="createVolume" type="primary" class="glass-button primary">创建</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 连接容器对话框 -->
  <el-dialog
    v-model="containersDialogVisible"
    title="使用该数据卷的容器"
    width="800px"
    class="glass-dialog"
  >
    <div v-if="currentVolumeContainers.length > 0">
      <el-table :data="currentVolumeContainers" style="width: 100%">
        <el-table-column prop="name" label="容器名称" min-width="200">
          <template #default="scope">
            <div class="container-info">
              <i class="fa fa-cube"></i>
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="volume_name" label="数据卷" min-width="200">
          <template #default="scope">
            <span class="volume-name">{{ scope.row.volume_name }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else class="no-containers">
      <i class="fa fa-info-circle"></i>
      <span>该数据卷当前没有被任何容器使用</span>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'

// 响应式数据
const loading = ref(false)
const selectedServer = ref('')

// 统计数据
const statistics = reactive({
  total_volumes: 0,
  used_volumes: 0,
  total_size: '0 MB'
})

// 数据列表
const dockerServers = ref([])
const volumes = ref([])

// 对话框状态
const createDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const containersDialogVisible = ref(false)

// 详情相关
const currentVolumeDetail = ref(null)
const detailDialogTitle = ref('')
const volumeDetailContent = ref('')
const detailContentRef = ref()

// 连接容器相关
const currentVolumeContainers = ref([])

// 创建表单
const createForm = reactive({
  name: '',
  driver: 'local',
  labels: '',
  options: ''
})

// 页面加载
onMounted(() => {
  loadData()
})



// 加载数据
const loadData = async () => {
  try {
    // 只加载服务器列表，数据卷列表会通过watch自动加载
    await loadDockerServers()
  } catch (error) {
    console.error('加载数据失败:', error)
    ElMessage.error('加载数据失败')
  }
}

// 加载Docker服务器列表
const loadDockerServers = async () => {
  try {
    const { dockerServerAPI } = await import('@/api/docker')
    const response = await dockerServerAPI.getServers()
    dockerServers.value = response.data.results || response.data || []

    // 自动选择第一个服务器
    if (dockerServers.value.length > 0 && !selectedServer.value) {
      selectedServer.value = dockerServers.value[0].id
    }
  } catch (error) {
    console.error('加载Docker服务器失败:', error)
    ElMessage.error('加载Docker服务器失败')
  }
}

// 加载数据卷列表
const loadVolumes = async () => {
  if (!selectedServer.value) {
    volumes.value = []
    calculateStatistics()
    return
  }

  loading.value = true
  try {
    const { dockerVolumeAPI } = await import('@/api/docker')
    const response = await dockerVolumeAPI.getVolumes(selectedServer.value)
    if (response.data.success) {
      volumes.value = response.data.volumes
      // 数据卷列表加载完成后立即计算统计数据
      calculateStatistics()
    }
  } catch (error) {
    console.error('加载数据卷列表失败:', error)
    ElMessage.error('加载数据卷列表失败')
  } finally {
    loading.value = false
  }
}

// 计算统计数据（同步函数，提高性能）
const calculateStatistics = () => {
  try {
    // 基于数据卷列表计算统计数据
    const totalVolumes = volumes.value.length
    const usedVolumes = volumes.value.filter(v =>
      v.UsageData && v.UsageData.RefCount > 0
    ).length

    // 计算总大小
    let totalSize = 0
    volumes.value.forEach(volume => {
      if (volume.UsageData && volume.UsageData.Size) {
        totalSize += volume.UsageData.Size
      }
    })

    Object.assign(statistics, {
      total_volumes: totalVolumes,
      used_volumes: usedVolumes,
      total_size: formatSize(totalSize)
    })
  } catch (error) {
    console.error('计算统计数据失败:', error)
  }
}

// 刷新数据卷列表
const refreshVolumes = () => {
  loadData()
  ElMessage.success('数据卷列表已刷新')
}

// 数据卷操作
const createVolume = async () => {
  if (!selectedServer.value) {
    ElMessage.error('请先选择Docker服务器')
    return
  }

  if (!createForm.name.trim()) {
    ElMessage.error('请输入数据卷名称')
    return
  }

  try {
    // 解析标签和选项
    const labels = {}
    const options = {}

    if (createForm.labels) {
      createForm.labels.split(',').forEach(item => {
        const [key, value] = item.split('=')
        if (key && value) {
          labels[key.trim()] = value.trim()
        }
      })
    }

    if (createForm.options) {
      createForm.options.split(',').forEach(item => {
        const [key, value] = item.split('=')
        if (key && value) {
          options[key.trim()] = value.trim()
        }
      })
    }

    const { dockerVolumeAPI } = await import('@/api/docker')
    const response = await dockerVolumeAPI.createVolume(selectedServer.value, {
      name: createForm.name.trim(),
      driver: createForm.driver,
      labels: labels,
      options: options
    })

    if (response.data.success) {
      ElMessage.success(response.data.message || '数据卷创建成功')
      createDialogVisible.value = false
      resetCreateForm()
      await loadVolumes()
    } else {
      ElMessage.error(response.data.message || '创建数据卷失败')
    }
  } catch (error) {
    console.error('创建数据卷失败:', error)
    ElMessage.error('创建数据卷失败')
  }
}

const pruneVolumes = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要清理所有未使用的数据卷吗？此操作不可恢复。',
      '确认清理',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    const { dockerVolumeAPI } = await import('@/api/docker')
    const response = await dockerVolumeAPI.pruneVolumes(selectedServer.value)

    if (response.data.success) {
      ElMessage.success(response.data.message || '数据卷清理成功')
      await loadVolumes()
    } else {
      ElMessage.error(response.data.message || '清理数据卷失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('清理数据卷失败:', error)
      ElMessage.error('清理失败')
    }
  }
}

const inspectVolume = async (volume: any) => {
  if (!selectedServer.value) {
    ElMessage.error('请先选择Docker服务器')
    return
  }

  try {
    currentVolumeDetail.value = volume
    detailDialogTitle.value = `数据卷 ${volume.Name} 详细信息`
    volumeDetailContent.value = '正在加载数据卷详细信息...'
    detailDialogVisible.value = true

    await refreshVolumeDetail()
  } catch (error) {
    console.error('获取数据卷详情失败:', error)
    ElMessage.error('获取数据卷详情失败')
  }
}

// 刷新数据卷详情
const refreshVolumeDetail = async () => {
  if (!currentVolumeDetail.value || !selectedServer.value) {
    return
  }

  try {
    const { dockerVolumeAPI } = await import('@/api/docker')
    const response = await dockerVolumeAPI.getVolumeDetails(selectedServer.value, currentVolumeDetail.value.Name)

    if (response.data.success) {
      volumeDetailContent.value = JSON.stringify(response.data.volume, null, 2)
    } else {
      volumeDetailContent.value = `获取数据卷详细信息失败: ${response.data.message || '未知错误'}`
    }
  } catch (error) {
    console.error('刷新数据卷详情失败:', error)
    volumeDetailContent.value = `获取数据卷详细信息失败: ${error.message}`
  }
}

// 复制数据卷详情
const copyVolumeDetail = async () => {
  try {
    await navigator.clipboard.writeText(volumeDetailContent.value)
    ElMessage.success('数据卷详情已复制到剪贴板')
  } catch (error) {
    console.error('复制失败:', error)
    ElMessage.error('复制失败')
  }
}

// 滚动到顶部
const scrollDetailToTop = () => {
  if (detailContentRef.value) {
    detailContentRef.value.scrollTop = 0
  }
}

// 滚动到底部
const scrollDetailToBottom = () => {
  if (detailContentRef.value) {
    detailContentRef.value.scrollTop = detailContentRef.value.scrollHeight
  }
}

// 关闭详情对话框
const closeDetailDialog = () => {
  volumeDetailContent.value = ''
  currentVolumeDetail.value = null
  detailDialogVisible.value = false
}

// 重置创建表单
const resetCreateForm = () => {
  Object.assign(createForm, {
    name: '',
    driver: 'local',
    labels: '',
    options: ''
  })
}

// 格式化大小
const formatSize = (bytes) => {
  if (!bytes || bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 查看连接的容器
const viewConnectedContainers = (volume: any) => {
  if (volume.ConnectedContainers && volume.ConnectedContainers.length > 0) {
    currentVolumeContainers.value = volume.ConnectedContainers.map(containerName => ({
      name: containerName,
      volume_name: volume.Name
    }))
    containersDialogVisible.value = true
  } else {
    ElMessage.info(`数据卷 ${volume.Name} 当前没有被任何容器使用`)
  }
}



const deleteVolume = async (volume: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除数据卷 "${volume.Name}" 吗？此操作不可恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    const { dockerVolumeAPI } = await import('@/api/docker')
    const response = await dockerVolumeAPI.removeVolume(selectedServer.value, volume.Name, { force: false })

    if (response.data.success) {
      ElMessage.success(response.data.message || '数据卷删除成功')
      await loadVolumes()
    } else {
      ElMessage.error(response.data.message || '删除数据卷失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除数据卷失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 工具函数

const formatTime = (time: string) => {
  if (!time) return '未知'
  return new Date(time).toLocaleString('zh-CN')
}

// 监听服务器选择变化
watch(selectedServer, (newValue) => {
  if (newValue) {
    loadVolumes()
  }
})
</script>

<style scoped>
/* 使用与Zabbix服务器配置页面完全相同的样式 */
.ansible-audit-container {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}

.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite linear;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: zoom 40s infinite linear;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: zoom 60s infinite linear;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

.audit-content {
  position: relative;
  z-index: 10;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.page-header {
  margin-bottom: 30px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.title-section h1 {
  color: rgba(255, 255, 255, 0.95);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.title-section h1 i {
  color: #a4f4ba;
  margin-right: 12px;
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 20px;
}

.stat-card {
  padding: 20px;
  text-align: center;
  min-width: 120px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #a4f4ba;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-filters {
  margin-bottom: 30px;
  padding: 20px;
}

.search-form {
  margin: 0;
}

.audit-table-section {
  padding: 30px;
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title i {
  color: #a4f4ba;
}

.config-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.config-name i {
  color: #00eaff;
}

.time-text, .path-text, .size-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.path-text, .size-text {
  font-family: monospace;
}

.server-select {
  width: 200px;
  margin-right: 10px;
}

/* 工具栏按钮样式 - 完全照抄Zabbix服务器配置页面 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

  &:hover {
    background: rgba(164, 244, 186, 0.25) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(164, 244, 186, 0.2) !important;
  }

  i {
    margin-right: 6px !important;
    color: #00eaff !important;
  }

  &.refresh-button {
    background: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(138, 43, 226, 0.3) !important;
      border-color: rgba(138, 43, 226, 0.6) !important;
      box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3) !important;
    }

    i {
      color: #8a2be2 !important;
    }
  }

  &.sync-button {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(59, 130, 246, 0.3) !important;
      border-color: rgba(59, 130, 246, 0.6) !important;
      box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
    }

    i {
      color: #3b82f6 !important;
    }
  }

  &.add-button {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(34, 197, 94, 0.3) !important;
      border-color: rgba(34, 197, 94, 0.6) !important;
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
    }

    i {
      color: #22c55e !important;
    }
  }

  &.import-button {
    background: rgba(6, 182, 212, 0.2) !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(6, 182, 212, 0.3) !important;
      border-color: rgba(6, 182, 212, 0.6) !important;
      box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3) !important;
    }

    i {
      color: #06b6d4 !important;
    }
  }

  &.delete-button {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(239, 68, 68, 0.3) !important;
      border-color: rgba(239, 68, 68, 0.6) !important;
      box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
    }

    i {
      color: #ef4444 !important;
    }
  }
}

/* 表格样式 */
:deep(.audit-table) {
  background: transparent !important;

  .el-table__header {
    background: rgba(164, 244, 186, 0.1) !important;
  }

  .el-table__header th {
    background: transparent !important;
    border-bottom: 1px solid rgba(164, 244, 186, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
  }

  .el-table__body tr {
    background: transparent !important;

    &:hover {
      background: rgba(164, 244, 186, 0.05) !important;
    }
  }

  .el-table__body td {
    border-bottom: 1px solid rgba(164, 244, 186, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.action-buttons .glass-button {
  padding: 8px 16px !important;
  font-size: 12px;
  white-space: nowrap;
  width: auto !important;
}
</style>
